<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>限时秒杀</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			#box{
				width: 702px;
				height: 378px;
				background: url(flash_sale.png);
				margin: 0 auto;
				
				
			}
			#box div{
				width: 50px;
				height: 50px;
				border: 1px solid gray;
				float: left;
				position: relative;
                top: 260px;
                left: 300px;	
                margin-left: 10px;
                text-align: center;
                line-height: 50px;			
			}
		</style>
		
	</head>
	<body>
		<div id="box">
		<div id="day"></div>
		<div id="hour"></div>
		<div id="minute"></div>
		<div id="seconds"></div>
		</div>
		<script>
			/*1、获取结束时间
			 * 2、定义函数
			 * 获取剩余时间：结束时间-当前时间
			 * 剩余时间显示在页面4个框
			 * 3、计时器没隔1秒执行函数
			 * 
			 */
			var now=new Date();
			//结束时间的毫秒数
			//var endSeconds=now.getTime()+24*60*60*2*1000;
			var endSeconds=new Date('2018-06-05  10:44:00').getTime();
			var day=hour=minute=seconds=0;
			//定义秒杀函数
			function seckill(){
			var nowtime=new Date();
			//获取剩余时间（毫秒数）
			
			var remain=(endSeconds-nowtime.getTime())/1000;
			if(remain>0){
				var day= parseInt(remain/(24*60*60));
			var hour=parseInt(remain/(60*60))%24;
			var minute=parseInt(remain/60%60);
			var seconds=parseInt(remain%60);
			}else{
				clearInterval(timer);
				day=hour=minute=seconds=0;
			}
			
			
			//用两位数表示剩余的天、小时、分钟、秒
			day=(day<10?'0'+day:day);
			hour=hour<10?'0'+hour:hour;
			minute=minute<10?'0'+minute:minute;
			seconds=seconds<10?'0'+seconds:seconds;
			
			
			
			
			
			//把秒转换成天、小时、分钟显示在页面上
			document.getElementById('day').innerHTML=day+'天';
			document.getElementById('hour').innerHTML=hour+'时';
			document.getElementById('minute').innerHTML=minute+'分';
			document.getElementById('seconds').innerHTML=seconds+'秒'
			
			}
			//计时器循环执行
			window.setInterval(seckill,1000);
		</script>
	</body>
</html>
